<template>

	<view class="container">
		<!-- 顶部面板 -->
		<view class="top--panel">
			<view class="banner" v-if="swiperList.length>0">
				<u-swiper keyName="filePath" indicator height="320rpx" circular :list="swiperList" @click="tapSwiper"
					:circular='true'></u-swiper>
			</view>
			<!-- 
			<view class="searchWp" @click="goToSearch()">
				<u--input placeholder="点击搜索" border="surround" shape='circle' inputAlign='center' suffixIcon='search'
					suffixIconStyle="font-size: 30px;" readonly></u--input>
			</view>
 -->
		</view>
		<u-line></u-line>
		<!-- 滚动区域 -->
		<view class="scroll-panel" id="scroll-panel">
			<view class="list-box">
				<view class="left">
					<scroll-view scroll-y="true" :style="{ 'height':scrollHeight + 'px' }"
						:scroll-into-view="leftIntoView" :scroll-with-animation="true">
						<view class="item leftTitle" v-for="(item,index) in productData" :key="index"
							:class="{ 'active':index==leftIndex }" :id="'left-'+index" :data-index="index"
							@tap="leftTap">{{item.category}}</view>
					</scroll-view>
				</view>
				<view class="main">
					<scroll-view scroll-y="true" :style="{ 'height':scrollHeight + 'px' }" @scroll="mainScroll"
						:scroll-into-view="scrollInto" :scroll-with-animation="true">
						<view class="item main-item" v-for="(item,index) in productData" :key="index"
							:id="'item-'+index">

							<view class="goods" v-for="(item2,index2) in item.infoList" :key="index2">
								<view class="goodsItem" @click="goToDetail(item2)">
									<view class="goodsItemImgWp">
										<img class='productIcon'
											:src="item2.icon?item2.icon:'https://file.casugn.com/storecompcard/temp/消防_1655371241807.png'"
											mode=""></img>
									</view>
									<view class="goodsTitleWp">
										<view class="goodsTitle">
											{{item2.name}}
										</view>
										<view class="moreWp">
											<img src="https://file.casugn.com/storecompcard/temp/更多的@2x(1)_1655372163640.png"
												class='moreImg' alt="">
										</view>
									</view>
								</view>

							</view>
						</view>
						<view class="fill-last" :style="{ 'height':fillHeight + 'px' }"></view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- 底部面板 -->
		<view class="bottom-panel">
		</view>
	</view>

</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import api from '@/api/api.js'
	export default {
		components: {},
		data() {
			return {
				scrollHeight: 400,
				scrollTopSize: 0,
				fillHeight: 10, // 填充高度，用于最后一项低于滚动区域时使用
				leftArray: [],
				mainArray: [],
				topArr: [],
				leftIndex: 0,
				scrollInto: '',
				swiperList: [],
				productData: []
			}
		},
		computed: {
			...mapGetters(['userInfo']),
			/* 计算左侧滚动位置定位 */
			leftIntoView() {
				return `left-${this.leftIndex > 3 ? (this.leftIndex-3):0}`;
			}
		},
		onPullDownRefresh() {
			this.queryListByCategory()

		},
		onReady() {
			/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
			setTimeout(() => {
				/* 等待滚动区域初始化完成 */
				this.initScrollView().then(() => {
					this.queryListByCategory()
				})
			}, 300);
		},
		created() {
			uni.hideTabBar()
		},
		onShow() {
			setTimeout(() => {
				/* 等待滚动区域初始化完成 */
				this.initScrollView().then(() => {
					this.queryListByCategory()
				})
			}, 100);
			this.querySwiperListByOpenId()
		},
		methods: {
			tapSwiper(index) {
				console.log('点击了第' + index + '张');
			},
			async querySwiperListByOpenId() {
				let {
					openid
				} = uni.getStorageSync('openId')
				let res = await this.$api.queryCurrentCardByOpenId({
					openId: openid
				})
				if (res.success && res.result.bcCompanyAbout && res.result.bcCompanyAbout.carousel.length > 0) {
					let arr = res.result.bcCompanyAbout.carousel.split(",")
					this.swiperList = arr.map(item => {
						let newItem = {
							url: item,
							filePath: item
						}
						return newItem
					})
				} else {
					this.swiperList = []
				}
			},
			//
			async queryListByCategory() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let {
					companyId
				} = this.userInfo
				companyId = companyId ? companyId : ''
				let res = await api.queryListByCategory({
					companyId
				})
				if (res.code == 200) {
					// console.log('queryListByCategory', res.result);
					this.productData = res.result
					// DOM 挂载后 再调用 getElementTop 获取高度的方法。
					setTimeout(() => {


						this.getElementTop();
					}, 100);
					setTimeout(() => {
						uni.stopPullDownRefresh()
						uni.hideLoading()
					}, 300)

				} else {
					uni.stopPullDownRefresh()
					uni.hideLoading()
				}
			},
			//跳转搜索栏
			goToSearch() {
				if (!this.userInfo.id) {
					return uni.showToast({
						title: '创建名片后才能使用搜索功能',
						icon: 'none'
					});
				}
				uni.navigateTo({
					url: '/pagesCard/productListSearch/productListSearch'
				})
			},
			/* 初始化滚动区域 */
			initScrollView() {
				return new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().select('#scroll-panel');
					view.boundingClientRect(res => {
						this.scrollTopSize = res.top;
						this.scrollHeight = res.height;
						setTimeout(() => {
							resolve();
						}, 100);
					}).exec();
				});
			},

			/* 获取元素顶部信息 */
			getElementTop() {
				new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().selectAll('.main-item');
					view.boundingClientRect(data => {
						resolve(data);
					}).exec();
				}).then((res) => {
					let topArr = res.map((item) => {
						return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
					});
					this.topArr = topArr;

					/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
					let last = res[res.length - 1].height;
					if (last - 20 < this.scrollHeight) {
						this.fillHeight = this.scrollHeight - last + 20;
					}
				});
			},
			/* 主区域滚动监听 */
			mainScroll(e) {
				// 节流方法
				clearTimeout(this.mainThrottle);
				this.mainThrottle = setTimeout(() => {
					scrollFn();
				}, 10);

				let scrollFn = () => {
					let top = e.detail.scrollTop;
					let index = 0;
					/* 查找当前滚动距离 */
					for (let i = (this.topArr.length - 1); i >= 0; i--) {
						/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
						if ((top + 2) >= this.topArr[i]) {
							index = i;
							break;
						}
					}
					this.leftIndex = (index < 0 ? 0 : index);
				}
			},
			/* 左侧导航点击 */
			leftTap(e) {
				console.log('左侧导航点击', e);
				let index = e.currentTarget.dataset.index;
				// this.leftIndex=index
				this.scrollInto = `item-${index}`;
			},
			//去详情
			goToDetail(item) {
				console.log(item);

				uni.navigateTo({
					url: '/pagesCard/productDetail/productDetail?id=' + item.detail_id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// page {
	// 	// height: calc(100vh - 90upx); //当有tabbar 时使用
	// 	height: 100vh;
	// }

	/* 容器 */
	.container {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;

		&>view {
			width: 100%;
		}

		.top--panel {
			box-sizing: border-box;

			.banner {
				margin: 0 30upx;
				padding-bottom: 30upx;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.searchWp {
				padding-bottom: 30upx;
				margin: 0 30upx;
			}
		}


		.scroll-panel {
			flex-grow: 1;
			height: 0;
			overflow: hidden;
		}

		.bottom-panel {

			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}
	}


	.list-box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;

		.left {
			width: 190upx;
			background-color: #d4e5fe;
			line-height: normal;
			box-sizing: border-box;

			.leftTitle {
				font-size: 26upx;
				font-weight: 400;
				color: #000000;
				line-height: 36upx;
				text-shadow: 1rpx 1rpx #eee;
			}

			.item {
				position: relative;
				height: 107upx;
				text-align: center;
				line-height: 107upx;
				font-size: 26upx;
				font-weight: 500;
				color: #000000;


				&+.item {
					margin-top: 1px;

					&::after {
						content: '';
						display: block;
						height: 0;
						border-top: #d6d6d6 solid 1px;
						width: 561upx;
						position: absolute;
						top: -1px;
						right: 0;
						transform: scaleY(0.5);
						/* 1px像素 */
					}
				}

				&.active {

					background-color: #fff;
					position: relative;

					&::before {
						content: '';
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						border-left: #015eea solid 4px;
						height: 100%;
						width: 0;
					}
				}
			}

			.fill-last {
				height: 0;
				width: 100%;
				background: none;
			}
		}

		.main {
			background-color: #f7fafc;
			flex: 1;
			box-sizing: border-box;



			.title {
				line-height: normal;
				padding: 30rpx 0;
				font-size: 24rpx;
				font-weight: bold;
				color: #666;
				background-color: #fff;
				position: sticky;
				top: 0;
				z-index: 19;
			}

			.item {
				border-bottom: #eee solid 1px;
			}

			.goods {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
				align-content: center;
				height: 110upx;
				box-shadow: 1px 1px 4px 0px rgba(66, 60, 254, 0.3);
				// box-shadow: 0px 0px 7px 0px rgba(209, 233, 255, 0.66);
				border-radius: 10upx;
				margin: 30rpx 20rpx;

				.goodsItem {
					display: flex;
					margin-left: 20rpx;

					.goodsItemImgWp {
						padding-right: 40upx;
						width: 100upx;

						.productIcon {
							width: 77upx;
							height: 77upx;
						}

					}

					.goodsTitleWp {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.goodsTitle {
							// flex: 1;
							width: 300upx;
							text-align: left;
							font-size: 30upx;
							font-weight: 400;
							color: #333333;
							line-height: 36upx;
							overflow: hidden;
							text-shadow: 1rpx 1rpx #eee;
						}

						.moreWp {
							.moreImg {
								width: 13upx;
								height: 21upx;
							}
						}
					}

				}


				.describe {
					font-size: 24rpx;
					color: #999;
				}

				.money {
					font-size: 24rpx;
					color: #efba21;
				}
			}
		}
	}
</style>